<template>
  <div class="">
    <header>
      <input
        type="text"
        v-model="inputVal"
        @input="inp"
        @keydown.up="up"
        @keydown.down="down"
        @keydown.enter="jump"
      /><button>百度一下</button>
    </header>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputVal: "", // 输入框绑定的值
    };
  },
  mounted() {},
  methods: {
    inp() {
      // input 事件
      //    console.log('dfghjk');
      this.$emit("inp", this.inputVal);
    },
    up() {
      // 键盘的上键
      this.$emit('inputFn','up');
    },
    down() {
      // 键盘的下键
      this.$emit('inputFn','down');
    },
    jump() {
      // 键盘的回车事件
      this.$emit('inputFn','enter');
    },
  },
  components: {},
};
</script>

<style lang='scss'>
header {
  display: flex;
  margin: 100px 10px;
  height: 50px;
  align-items: center;
  overflow: hidden;
  input {
    height: 40px;
    width: 360px;
    border-radius: 5px 0 0 5px;
    border-right: none;
  }
  button {
    height: 44px;
    border-left: none;
    border-radius: 0px 5px 5px 0px;
    background: skyblue;
    width: 100px;
  }
}
</style>
